<template>
  <!-- 编辑推荐 -->
  <section class="editors-recommend">
    <h2>编辑推荐</h2>
    <ul>
      <router-link
        class="li"
        v-for="value of redactList.result"
        :key="value.title"
        :to="/detail/ + value.pdsid"
      >
        <figure>
          <img :src="value.imgUrl" alt="" />
        </figure>
        <div class="right">
          <div class="right-top">
            <h3>{{ value.title }}</h3>
            <p>{{ value.describe }}</p>
          </div>
          <!-- 播放量 -->
          <p>{{ value.view }}</p>
        </div>
      </router-link>
    </ul>
  </section>
</template>

<script>
import { onMounted, computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    // 编辑推荐列表
    const store = useStore();
    const getRecommend = () => store.dispatch("getRecommend");
    const redactList = computed(
      () => store.state.recommend.getRecommendContent
    );
    onMounted(() => {
      getRecommend();
    });
    return {
      redactList,
      getRecommend,
    };
  },
};
</script>

<style lang="less" scoped>
// 编辑推荐
.editors-recommend {
  margin-bottom: 25px;
  padding: 0 12px;
  h2 {
    margin-bottom: 12px;
    color: #000000;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .li {
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    figure {
      margin: 0;
      width: 85px;
      height: 114px;
      margin-right: 14px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      flex: 1;
      height: 114px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .right-top {
        h3 {
          margin: 0;
          font-size: 15px;
          color: #444243;
          font-weight: bold;
          margin-bottom: 10px;
        }
        p {
          font-size: 14px;
          color: #a9a9a9;
        }
      }
      p {
        font-size: 12px;
        color: #c9a35c;
      }
    }
  }
}
</style>
